<template>
    <div class="register">
   
        <div class="main">
           <div class="imgr">
              <!-- <img class="auto-img" src="../assets/img/skypixel.jpg" alt="" /> -->
            </div>
            <div class="login">
                <h1>注册</h1>
                <p style="margin-top:30px;">请输入你的手机号</p>
                <input type="text">
                
                <p>请输入验证码</p>
                    
                <div class="code">
                    <input type="password">
                    <button>发送验证码</button>
                </div>
                <br>
                <p>请输入密码</p>
                <input type="password">
                <br>
                <p>再次输入密码</p>
                <input type="password">
                <br>
                <div class="che">
                    <div class="left">
                        <input type="checkbox"> <span>我同意 <a href="https://www.skypixel.com/terms" style="color:#1088f2 ;">使用条款 </a> 和 <a href="https://www.skypixel.com/privacy" style="color:#1088f2 ;"> 隐私政策</a></span>
                    </div>
                    
                </div>
                <button>注册</button>
                <br>
                <div class="loginbox">
                    <span>已有账号 <router-link to="/record" style="color:#1088f2 ;">登录</router-link></span>
                </div>
                
            </div>
        </div>
        <foot-navbar></foot-navbar>
    </div>
</template>

<script>
import FootNavbar from "../components/FootNavbar.vue"


    export default {
        components:{
            FootNavbar
        }
    }
</script>

<style lang="scss" scoped>
.register {
    .foot{
        width: 100%;
        position: fixed;
        bottom: 0;
    }
  .main {
    display: flex;
    height: 100%;
  }
  .imgr {
    margin-bottom: -3px;
    width: 50%;
    height: 95vh;
    background-size: cover;
    background-position: 50%;
    background-image: url('../assets/img/skypixel.jpg');
  }
  .login {
    width: 50%;
    padding-right: 12%;
    box-sizing: border-box;
    padding-left: 88px;
    margin-top: 10px;
    h1 {
      font-size: 40px;
    }
    p {
      font-weight: bold;
      margin: 10px 0;
      &:first-child {
        margin-top: 30px;
      }
    }
    input {
      width: 100%;
      height: 41px;
      box-sizing: border-box;
      outline: yellow;
      border: 1px solid #ccc;
      padding: 12px;
      border-radius: 5px;
    }
    button {
      margin: 30px 0;
      width: 100%;
      height: 41px;
      background-color: #1088f2;
      border: 0;
      border-radius: 5px;
      color: #fff;
      font-weight: bold;
    }
  }
  .che {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
    }
    input {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
  }
  .code {
    display: flex;
    justify-content: space-between;
    input {
      width: 68%;
    }
    button {
      margin: 0;
      width: 30%;
      height: 41px;
      background-color: #1088f2;
      border: 0;
      border-radius: 5px;
      color: #fff;
      font-weight: bold;
    }
  }
  .loginbox {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

</style>